<template>
	<div class="boader">
		<div class="nav-head"><router-link to="/layout/musLib"><img src="../../../assets/icon-return45.png"></router-link><div class="title">排行榜</div></div>
		<div class="top-blank"></div>
		<div class="boader-wraper">
			<h2>魔笛音乐排行榜</h2>
			<div class="boader-list">
				<div class="boader-type new-songs-boader">
					<div class="boader-img"><img src="../../../assets/38240.png"></div>
					<div class="boader-music">
						<p class="top1"><span class="top-num">1</span> <span class="music">给我一个理由忘记</span>-<span class="singer">A-Lin</span></p>
						<p class="top2"><span class="top-num">2</span> <span class="music">月牙湾</span>-<span class="singer">A-Lin</span></p>
						<p class="top3"><span class="top-num">3</span> <span class="music">远走高飞</span>-<span class="singer">金志文</span></p>
					</div>
					<div class="next-btn"><img src="../../../assets/icon-next45black.png"></div>
				</div>
				<div class="boader-type soaring-boader" @click="ToSoaringBoader">
					<div class="boader-img"><img src="../../../assets/18240.png"></div>
					<div class="boader-music">
						<p class="top1"><span class="top-num">1</span> <span class="music">back to me</span>-<span class="singer">黄礼格</span></p>
						<p class="top2"><span class="top-num">2</span> <span class="music">sober</span>-<span class="singer">G-Eazy</span></p>
						<p class="top3"><span class="top-num">3</span> <span class="music">START</span>-<span class="singer">金贤政</span></p>
					</div>
					<div class="next-btn"><img src="../../../assets/icon-next45black.png"></div>
				</div>
				<div class="boader-type hot-boader">
					<div class="boader-img"><img src="../../../assets/19240.png"></div>
					<div class="boader-music">
						<p class="top1"><span class="top-num">1</span> <span class="music">Miss you</span>-<span class="singer">Louis-Tomlinson</span></p>
						<p class="top2"><span class="top-num">2</span> <span class="music">Another Me</span>-<span class="singer">Min-Chea</span></p>
						<p class="top3"><span class="top-num">3</span> <span class="music">1000</span>-<span class="singer">Future</span></p>
					</div>
					<div class="next-btn"><img src="../../../assets/icon-next45black.png"></div>
				</div>
				<div class="boader-type network-boader">
					<div class="boader-img"><img src="../../../assets/20240.png"></div>
					<div class="boader-music">
						<p class="top1"><span class="top-num">1</span> <span class="music">有点甜</span>-<span class="singer">汪苏泷</span></p>
						<p class="top2"><span class="top-num">2</span> <span class="music">不分手的恋爱</span>-<span class="singer">汪苏泷</span></p>
						<p class="top3"><span class="top-num">3</span> <span class="music">多远都要在一起</span>-<span class="singer">邓紫棋</span></p>
					</div>
					<div class="next-btn"><img src="../../../assets/icon-next45black.png"></div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../components/music_player'
	export default{
		name:"boader",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		},
		methods:{
			ToSoaringBoader(){
				this.$router.push('/soaBoa');
			}
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.boader-wraper{
	width: 100%;
	h2{
		padding-top: 33 / 100rem;
		padding-bottom: 20 / 100rem;
		padding-left: 20 / 100rem;
		font-size: 30 / 100rem;
	}
	.boader-list{
		width: 100%;
		.boader-type{
			width: 100%;
			box-sizing: border-box;
			padding-left: 20 / 100rem;
			overflow: hidden;
			margin-bottom: 28 / 100rem;
			// position: relative;
			.boader-img{
				float: left;
				width: 240 / 100rem;
				img{
					width: 100%;
				}
			}
			.boader-music{
				float: left;
				margin-left: 15 / 100rem;
				font-size: 24 / 100rem;
				p{
					color: #8c8c8c;
					.top-num,.music{
						color: #333;
					}
				}
				.top1{
					padding-top: 42 / 100rem;
				}
				.top2{
					padding-top: 45 / 100rem;
					padding-bottom: 49 / 100rem;
				}

			}
			.next-btn{
				float: right;
				margin-right: 20 / 100rem;
				width: 26 / 100rem;
				height: 45 / 100rem;
				margin-top: 97.5 / 100rem;
				img{
					width: 100%;
				}
			}
		}
	}
}	
</style>